<template>
  <div class="message_box" v-show="isShow">
    <header>收藏</header>
    <div class="classify clearfix">
      <div class="title">收藏到以下分类:</div>
      <scroll class="content">
        <div class="class_item"
             v-for="(item, index) in classify"
             @click="collectToClass(index)">{{item}}</div>
      </scroll>
    </div>
    <el-form :model="classForm"
             ref="classForm"
             :rules="rules"
             class="classForm"
             label-width="90px">
      <el-form-item label="新的分类" prop="class">
        <el-input v-model="classForm.class"
                  placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('classForm')">创建新的分类</el-button>
      </el-form-item>
    </el-form>
    <span class="el-icon-circle-close" @click="close"></span>
  </div>
</template>

<script>
  import {getClassify, addClassify, collect} from "network/collect";
  import Scroll from "components/content/scroll/Scroll";
  export default {
    name: "MessageBox",
    components: {
      Scroll
    },
    data() {
      return {
        classify: [],
        isShow: false,
        id: '',
        userId: '',
        type: '',
        classForm: {
          class: ''
        },
        rules: {
          class: [
            {required: true, message: '请输入分类', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      collect(id, userId, type) {
        // 将请求的分类数据进行保存，在此展示，拿到文章id，用户id以及分类id post到后端
        getClassify(type, userId).then(res => {
          if(res.data.code) {
            this.classify = res.data.data
          }
        })
        this.userId = userId
        this.id = id
        this.type = type
        this.isShow = true
      },
      collectToClass(index) {
        // 根据index拿到对应的分类的id
        const obj = {
          userId: this.userId,
          type: this.type,
          category: this.classify[index],
          collectId: this.id
        }
        collect(obj).then(res => {
          console.log(res)
        })
        this.$toast.show('成功收藏', 'success', 1000)
        this.close()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 添加收藏分类
            const obj = {
              userId: this.userId,
              type: this.type,
              category: this.classForm.class
            }
            addClassify(obj).then(res => {
              console.log(res)
              if(res.data.code) {
                this.$toast.show('成功添加分类', 'success', 1000)
                this.collect(this.id, this.userId, this.type)
                this.classForm.class = ''
              } else {
                this.$toast.show('分类已存在', 'failure', 1000)
                this.classForm.class = ''
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      close() {
        this.isShow = false
      }
    }
  }
</script>

<style scoped>
  .message_box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 430px;
    padding: 25px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0, .1);
    box-sizing: border-box;
    border-radius: 10px;
  }

  header {
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }

  .classify {
    margin-top: 10px;
  }

  .classify .title {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .classify .content {
    width: 100%;
    height: 150px;
  }

  .classify .content .class_item {
    height: 50px;
    border-bottom: 1px solid #eeeeee;
    line-height: 50px;
    text-indent: 1em;
    font-size: 14px;
  }

  .classify .class_item:hover {
    cursor: pointer;
    background-color: #002766;
    color: #ffffff;
  }

  .classForm {
    margin-top: 30px;
  }

  .classForm >>> .el-form-item {
    width: 400px;
  }

  .el-button--primary {
    background-color: #4361a7;
    border-color: #4361a7;
    color: #fff;
  }

  .el-button--primary:hover {
    background-color: #5177ce;
    border-color: #5177ce;
    color: #fff;
  }

  .el-icon-circle-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10001;
    font-size: 18px;
    color: #8F9395;
  }

  .el-icon-circle-close:hover {
    color: #002766;
    cursor: pointer;
  }


</style>
